<div class="main-container">
  <!-- 顶部一级菜单 -->
  <div class="header-menu">
    <!-- Logo -->
    <div class="logo">
      <i nz-icon nzType="ant-design" nzTheme="outline"></i>
      <span>Admin Pro</span>
    </div>

    <!-- 左侧菜单 -->
    <ul class="menu-list">
      <li
        *ngFor="let menu of topMenus"
        [class.active]="currentTopMenu === menu.id"
        (click)="switchTopMenu(menu)"
      >
        {{ menu.name }}
      </li>
    </ul>

    <!-- 右侧用户信息 -->
    <div class="user-info">
      <!-- 主题配置按钮 -->
      <span class="theme-setting" (click)="openThemeDrawer()">
        <i nz-icon nzType="setting" nzTheme="outline"></i>
      </span>
      <span class="divider">|</span>
      <span class="welcome">
        <i nz-icon nzType="user" nzTheme="outline"></i>
        欢迎，{{ userName }}
      </span>
      <span class="divider">|</span>
      <span class="logout" (click)="logout()">
        <i nz-icon nzType="logout" nzTheme="outline"></i>
        退出
      </span>
    </div>
  </div>

  <!-- 左侧菜单和右侧内容区布局 -->
  <div class="content-wrapper">
    <!-- 左侧菜单容器 -->
    <div class="side-menu-container">
      <!-- 左侧菜单 -->
      <div class="side-menu" [class.collapsed]="isCollapsed">
        <app-recursive-menu
          [menuItems]="currentSideMenus"
          [currentId]="currentTab?.id"
          [isCollapsed]="isCollapsed"
          (itemClick)="onMenuItemClick($event)"
          (expandChange)="onExpandChange($event)"
        >
        </app-recursive-menu>
      </div>
      <!-- 收起按钮 -->
      <button class="collapse-trigger" (click)="toggleSideMenu()">
        <i
          nz-icon
          [nzType]="isCollapsed ? 'right' : 'left'"
          nzTheme="outline"
        ></i>
      </button>
    </div>

    <!-- 右侧内容区 -->
    <div class="content-area">
      <!-- Tab页签 -->
      <div class="tabs-header">
        <div
          *ngFor="let tab of openedTabs"
          class="tab-item"
          [class.active]="currentTab?.id === tab.id"
          (click)="switchTab(tab)"
        >
          {{ tab.name }}
          <span class="close-icon" (click)="closeTab(tab, $event)"
            >&times;</span
          >
        </div>
      </div>

      <!-- Tab内容 -->
      <div class="tab-content">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>

  <!-- 主题配置抽屉 -->
  <nz-drawer
    [nzVisible]="isThemeDrawerVisible"
    nzTitle="主题配置"
    (nzOnClose)="closeThemeDrawer()"
    nzPlacement="right"
    [nzWidth]="300"
  >
    <ng-container *nzDrawerContent>
      <div class="theme-settings">
        <!-- 主题模式 -->
        <div class="setting-block">
          <h4>主题模式</h4>
          <nz-radio-group [(ngModel)]="themeConfig.mode">
            <label nz-radio nzValue="light">
              <i nz-icon nzType="sun" nzTheme="outline"></i>
              亮色
            </label>
            <label nz-radio nzValue="dark">
              <i nz-icon nzType="moon" nzTheme="outline"></i>
              暗色
            </label>
          </nz-radio-group>
        </div>

        <!-- 布局模式 -->
        <div class="setting-block">
          <h4>布局模式</h4>
          <div class="layout-options">
            <div
              class="layout-item"
              [class.active]="themeConfig.layout === 'side'"
              (click)="themeConfig.layout = 'side'"
            >
              <img src="assets/layout-side.png" alt="侧边布局" />
              <div>侧边菜单布局</div>
            </div>
            <div
              class="layout-item"
              [class.active]="themeConfig.layout === 'top'"
              (click)="themeConfig.layout = 'top'"
            >
              <img src="assets/layout-top.png" alt="顶部布局" />
              <div>顶部菜单布局</div>
            </div>
          </div>
        </div>

        <!-- 主题色 -->
        <div class="setting-block">
          <h4>主题色</h4>
          <div class="color-picker">
            <div
              class="color-item"
              *ngFor="let color of themeColors"
              [style.background]="color"
              [class.active]="themeConfig.primaryColor === color"
              (click)="changeThemeColor(color)"
            ></div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="setting-actions">
          <button nz-button nzType="primary" (click)="applyTheme()">
            应用
          </button>
          <button nz-button (click)="resetTheme()">重置</button>
        </div>
      </div>
    </ng-container>
  </nz-drawer>
</div>
